<template>
	<view class="fine-print">
		<view class="print-box">
			<view class="expenses-box">
				<view class="text-box">
					<view class="title">
						费用说明
					</view>
					<view class="content">
						价格为多人拼团出行，2人共享一个房间，单人的价格。单人出行或拼住不成功，仅一人入住一个房间时，需要支付单间差。
					</view>
				</view>
				<view class="text-box">
					<view class="title">
						费用包含
						<text class="legend">
							<text class="dot"></text>
							已包含
						</text>
					</view>
					<view class="inclusion-item" v-for="(item,index) in inclusionsData" :key="index">
						<view class="item-content">
							<text class="item-title">{{item.inclusions_title}}</text>
							<view class="item-desc" v-if="item.inclusions_content">
								<text class="specification">{{item.inclusions_content}}</text>
							</view>
						</view>
						<text class="dot"></text>
					</view>
				</view>
				<view class="text-box">
					<view class="title">
						费用不含
						<text class="legend">
							<text class="dot dot-red"></text>
							不包含
						</text>
					</view>
					<view class="inclusion-item" v-for="(item, index) in exclusionsData" :key="index">
						<view class="item-content">
							<text class="item-title">{{item.title}}</text>
							<view class="item-desc">
								<text class="specification">{{item.content}}</text>
							</view>
						</view>
						<text class="dot dot-red"></text>
					</view>
				</view>
			</view>
			<view class="expenses-box">
				<view class="text-box">
					<view class="title">温馨提示</view>
					<view class="warning-item">
						<text class="warning-icon">*</text>
						<text class="warning-text">以上旅游行程在实际执行中可能会根据季节气候、自然环境等不可抗因素进行调整，购买前请知悉。</text>
					</view>
					<view class="warning-item">
						<text class="warning-icon">*</text>
						<text class="warning-text">价格为多人拼团出行，2人共享一个房间的单人价格。单人出行或拼住不成功时，需支付单间差。</text>
					</view>
				</view>
			</view>
			<view class="expenses-box">
				<view class="text-box">
					<view class="title">预订条款及取消政策</view>
					
					<!-- 淡季和平季政策 -->
					<view class="policy-section">
						<view class="policy-title">
							<text class="policy-tag">淡季和平季政策</text>
							<text class="policy-time">适用时间：8月26日-9月13日、9月19日-9月27日、10月10日-12月28日</text>
						</view>
						<view class="policy-list">
							<view class="policy-item" v-for="(item, index) in lowSeasonPolicy" :key="index">
								<text class="item-num">{{index + 1}}、</text>
								<text class="item-content">{{item}}</text>
							</view>
						</view>
					</view>

					<!-- 旺季政策 -->
					<view class="policy-section">
						<view class="policy-title">
							<text class="policy-tag">旺季政策</text>
							<text class="policy-time">适用时间：8月15日-8月25日、9月14日-9月18日、12月29日-12月31日</text>
						</view>
						<view class="policy-list">
							<view class="policy-item" v-for="(item, index) in peakSeasonPolicy" :key="index">
								<text class="item-num">{{index + 1}}、</text>
								<text class="item-content">{{item}}</text>
							</view>
						</view>
					</view>

					<!-- 节日政策 -->
					<view class="policy-section">
						<view class="policy-title">
							<text class="policy-tag">节日政策</text>
							<text class="policy-time">适用时间：国庆节9月28日-10月9日</text>
						</view>
						<view class="policy-list">
							<view class="policy-item" v-for="(item, index) in holidayPolicy" :key="index">
								<text class="item-num">{{index + 1}}、</text>
								<text class="item-content">{{item}}</text>
							</view>
						</view>
					</view>

					<view class="warning-item">
						<text class="warning-icon">*</text>
						<text class="warning-text">特别说明：当旅行日期跨不同季节时，取消政策从严执行。</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,watchEffect
	} from 'vue';
	const inclusionsData = ref([]);
	const exclusionsData = ref([
		{
			title: '大交通',
			content: '全国各地往返成都的大交通'
		},
		{
			title: '个人消费',
			content: '一切个人消费以及"费用包含"中未提及的任何费用：\n-沿途午餐晚餐自理，大家可一起AA，也可单独用餐（领队可以提供当地特色推荐）\n-当地转乘车和骑马费用：冷噶措骑马200元/匹（单程）、子梅垭口中转车费用（参考约300元/车，3-4人一车，以实际收费为准）\n-途中个人消费，如酒水、骑马等'
		}
	]);
	
	// 淡季和平季政策
	const lowSeasonPolicy = ref([
		'预订旅行产品须支付定金方可确认预订',
		'行程开始前15天及以上(不包含出发当天)，可申请无损取消及退款',
		'行程开始前8-14天(不包含出发当天)，申请取消需要收取订单金额的10%作为临时取消的损失',
		'行程开始前0-7天，申请取消需要收取订单金额的20%作为临时取消的损失',
		'行程开始当天，申请取消需要收取订单金额的100%作为临时取消的损失'
	]);

	// 旺季政策
	const peakSeasonPolicy = ref([
		'预订旅行产品须支付定金方可确认预订',
		'行程开始前15天及以上(不包含出发当天)，可申请无损取消及退款',
		'行程开始前8-14天(不包含出发当天)，申请取消需要收取订单金额的20%作为临时取消的损失',
		'行程开始前0-7天，申请取消需要收取订单金额的30%作为临时取消的损失',
		'行程开始当天，申请取消需要收取订单金额的100%作为临时取消的损失'
	]);

	// 节日政策
	const holidayPolicy = ref([
		'预订旅行产品须支付全款方可确认预订',
		'行程开始前20天及以上(不包含出发当天)，可申请无损取消及退款',
		'行程开始前15-19天(不包含出发当天)，申请取消需要收取订单金额的30%作为临时取消的损失',
		'行程开始前8-14天(不包含出发当天)，申请取消需要收取订单金额的40%作为临时取消的损失',
		'行程开始前0-7天，申请取消需要收取订单金额的50%作为临时取消的损失',
		'行程开始当天，申请取消需要收取订单金额的100%作为临时取消的损失'
	]);
	
	const props = defineProps({
		inclusions: {
			type: Array,
			default: ()=>[]
		}
	})
	
	// 使用 watchEffect 监听并处理日期逻辑
	watchEffect(() => {
		inclusionsData.value = JSON.parse(props.inclusions)
		console.log('inclusions2',inclusionsData.value);
	});
</script>

<style scoped>
	.fine-print {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.print-box {
		width: 100%;
		margin: 20rpx 0rpx;
		box-sizing: border-box;

	}

	.expenses-box {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 18rpx;
		padding: 24rpx 24rpx 54rpx 24rpx;
		box-sizing: border-box;
		display: flex;
		gap: 30rpx;
		flex-direction: column;
		margin-bottom: 30rpx;
	}

	.text-box {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.text-box .title {
		width: 100%;
		font-size: 34rpx;
		font-weight: 600;
		color: rgba(0, 0, 0, 1);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.text-box .content {
		width: 100%;
		padding: 16rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		font-weight: 400;
		color: #666;
		line-height: 1.6;
	}

	.text-box .tips {
		width: 100%;
		padding: 0 10rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		font-weight: 600;
		color: rgba(138, 138, 138, 1);
	}

	.legend {
		font-size: 24rpx;
		font-weight: normal;
		color: #666;
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: #4CAF50;
		display: inline-block;
	}

	.dot-red {
		background-color: #FF4D4F;
	}

	.inclusion-item {
		width: 100%;
		padding: 16rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 20rpx;
		background: #f8f8f8;
		border-radius: 12rpx;
		margin-bottom: 12rpx;
	}

	.item-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.item-title {
		font-size: 28rpx;
		color: #333;
		line-height: 1.4;
		font-weight: 500;
	}

	.item-desc {
		font-size: 24rpx;
		color: #666;
		line-height: 1.6;
	}

	.specification {
		color: #666;
		font-size: 24rpx;
		line-height: 1.6;
		white-space: pre-wrap;
		word-break: break-all;
	}

	/* .content text{
		flex: 1;
	} */
	.content .specification {
		/* width: 200rpx; */
	}

	.warning-item {
		display: flex;
		align-items: flex-start;
		gap: 8rpx;
		padding: 12rpx 16rpx;
		background: #FFF7E6;
		border-radius: 8rpx;
	}

	.warning-icon {
		color: #FF4D4F;
		font-size: 28rpx;
		line-height: 1.4;
	}

	.warning-text {
		flex: 1;
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
	}

	.policy-section {
		background: #f8f8f8;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.policy-title {
		margin-bottom: 16rpx;
	}

	.policy-tag {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 8rpx;
		display: block;
	}

	.policy-time {
		font-size: 24rpx;
		color: #666;
		display: block;
	}

	.policy-list {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.policy-item {
		display: flex;
		gap: 8rpx;
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
	}

	.item-num {
		flex-shrink: 0;
	}

	.item-content {
		flex: 1;
	}

</style>